import React from "react";
import Tabbar from "@/components/TabBar";
import '@/style//css/index.css'
import Top from "@/components/Top";

const Index  = () =>
{
    const items = () =>{

        return (
            <>
            <React.UI.Swiper autoplay loop>
                <React.UI.Swiper.Item>
                    <React.UI.Image src={'/assets/images/coupon.png'} width={'100%'} height={'213px'} fit='cover' />
                </React.UI.Swiper.Item>
                <React.UI.Swiper.Item>
                    <React.UI.Image src={'/assets/images/coupon.png'} width={'100%'} height={'213px'} fit='cover' />
                </React.UI.Swiper.Item>
                <React.UI.Swiper.Item>
                    <React.UI.Image src={'/assets/images/coupon.png'} width={'100%'} height={'213px'} fit='cover' />
                </React.UI.Swiper.Item>
            </React.UI.Swiper>
            
            </>
        )
        
    }
   

    return (
        <>
            {/* <!-- 导航 --> */}
               <Top>首页</Top>
                {/* <!-- 轮播图的优惠券 --> */}
                <div className="swiper mySwiper">
                    <div className="swiper-wrapper">
                    {items() }
                        {/* <div className="swiper-slide"><a href="coupon-info.html"><img src="/assets/images/coupon.png" alt="" /></a></div>
                        <div className="swiper-slide"><a href="coupon-info.html"><img src="/assets/images/coupon.png" alt="" /></a></div>
                        <div className="swiper-slide"> <a href="coupon-info.html"><img src="/assets/images/coupon.png" alt="" /></a></div> */}
                    </div>
                    <div className="swiper-pagination"></div>
                </div>

                <div className="hotel_search">
                    <input type="text" placeholder="请输入关键词搜索" />
                    <div className="screen_icon">
                        <img src="/assets/images/screen.png" alt="" />
                    </div>
                </div>

                <div className="hotellist">
                    <div className="item">
                        <a href="detail.html">

                            <div className="images">
                                <div className="swipers">
                                    <img src="/assets/images/hotel1.jpg" alt="" />
                                </div>
                                <div className="title">暑假特价房</div>
                            </div>
                            <div>
                                <div className="item_top">
                                    <span>推广优惠</span>
                                    <span>月租惠选</span>
                                    <span>满减优惠</span>
                                    <span>节假日优惠</span>
                                </div>
                                <div className="item_bot">
                                    <div className="font">
                                        <span className="price">￥60.00/晚</span>
                                        <span className="market_price">￥80.00/晚</span>
                                    </div>
                                    <div className="btn">立即预定</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div className="item">
                        <a href="detail.html">
                            <div className="images">
                                <div className="swipers">
                                    <img src="/assets/images/hotel1.jpg" alt="" />
                                </div>
                                <div className="title">暑假特价房</div>
                            </div>
                            <div>
                                <div className="item_top">
                                    <span>推广优惠</span>
                                    <span>月租惠选</span>
                                    <span>满减优惠</span>
                                    <span>节假日优惠</span>
                                </div>
                                <div className="item_bot">
                                    <div className="font">
                                        <span className="price">￥60.00/晚</span>
                                        <span className="market_price">￥80.00/晚</span>
                                    </div>
                                    <div className="btn">立即预定</div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div className="item">
                        <a href="detail.html">
                            <div className="images">
                                <div className="swipers">
                                    <img src="/assets/images/hotel1.jpg" alt="" />
                                </div>
                                <div className="title">暑假特价房</div>
                            </div>
                            <div>
                                <div className="item_top">
                                    <span>推广优惠</span>
                                    <span>月租惠选</span>
                                    <span>满减优惠</span>
                                    <span>节假日优惠</span>
                                </div>
                                <div className="item_bot">
                                    <div className="font">
                                        <span className="price">￥60.00/晚</span>
                                        <span className="market_price">￥80.00/晚</span>
                                    </div>
                                    <div className="btn">立即预定</div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

                <div className="hotel_more">
                    没有更多了
                </div>

                <div style={{height: '55px'}}></div>

                <Tabbar />
        </>
    )
}

export default Index;